<template>
  <div class="login_box">
    <div class="ablaze_login--bg">
      <img src="../../assets/rainbow.png" alt="">
    </div>
    <div class="ablaze_login">
      <div
          class="ablaze_login--owl"
          :style="{ backgroundImage: imgs.owl }"
          :class="show ? 'owlActive' : ''"
      >
        <div class="owl_hand"></div>
        <div class="owl_hand owl_hand_r"></div>
        <div class="claws">
          <div class="owl_claw" :style="{ backgroundImage: imgs.claw }"></div>
          <div
              class="owl_claw owl_claw_r"
              :style="{ backgroundImage: imgs.claw }"
          ></div>
        </div>
      </div>
      <div class="ablaze_login--box" >
        <div class="ablaze_login--form">
          <a-form
              :model="formState"
              @finish="handleFinish"
              @finishFailed="handleFinishFailed"
              :label-col="formConfig.labelCol"
              :wrapper-col="formConfig.wrapperCol"
              @keyup.enter="login"
          >
            <a-form-item label="账号">
              <a-input v-model:value="formState.admin" placeholder="Username">
                <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
              </a-input>
            </a-form-item>
            <a-form-item label="密码">
              <a-input @focus="changeShow(true)" @blur="changeShow(false)" v-model:value="formState.password" type="password" placeholder="Password">
                <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
              </a-input>
            </a-form-item>
            <a-form-item label="确认密码" v-if="isLogin">
              <a-input @focus="changeShow(true)" @blur="changeShow(false)" v-model:value="formState.password" type="password" placeholder="Password">
                <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
              </a-input>
            </a-form-item>
          </a-form>
        </div>
        <div class="ablaze_login--action">
          <!-- <a-button
            html-type="submit"
          >
            注册
          </a-button> -->
          <a-button
              style="margin-left: 10px"
              type="primary"
              html-type="submit"
              @click="login"
              :loading='loading'
          >
            登录
          </a-button>
          <div style="text-align: center;margin-top: 20px;color: #cccccc;font-size: smaller">
            纸上的彩虹
            <a href="https://beian.miit.gov.cn">皖ICP备2021009081号-1</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent , reactive, UnwrapRef  } from "vue";
import owl from "@a/images/login/owl.png";
import claw from "@a/images/login/owl-claw.png";
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import { useStore } from 'vuex';
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router'
interface FormState {
  admin: string;
  password: string;
}
export default defineComponent({
  name: "Login",
  components: {
    UserOutlined,
    LockOutlined,
  },
  setup: () => {
    let loading = ref(false);
    let show = ref(false);
    let isLogin = ref(false);
    const imgs = ref({
      owl: "url(" + owl + ")",
      claw: "url(" + claw + ")",
    });
    const store = useStore();
    const router = useRouter();
    const formConfig = reactive({
      labelCol: { span : 6 },
      wrapperCol: { span : 18 },
    });
    function changeShow(flag:boolean) {
      show.value = flag;
    }
    const formState: UnwrapRef<FormState> = reactive({
      admin: '',
      password: '',
    });
    const handleFinish = (values: FormState) => {
      console.log(values, formState);
    };
    const handleFinishFailed = (errors: ValidateErrorEntity<FormState>) => {
      console.log(errors);
    };

    async function login() {
      if(loading.value) return
      loading.value=true
      if (!formState.admin){
        message.warning('请输入账号')
      }else if (!formState.password){
        message.warning('请输入密码')
      }else {
        const res: boolean = await store.dispatch('loginAction',formState);
        if(res){
          message.success('登录成功')
          await store.dispatch("getUserMsgAction");
          router.push({name: 'home'})
        }
      }
      loading.value=false
    }
    return {
      isLogin,
      loading,
      imgs,
      show,
      formState,
      formConfig,
      changeShow,
      handleFinish,
      handleFinishFailed,
      login
    };
  },
});
</script>

<style scoped lang="less">
.login_box{
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.ablaze_login--bg{
  position:absolute;
  height: 50vh;
  width: 100%;
  top:0;
  background-color: #eee;
  img{
    margin-top: 50px;
  }
}
.ablaze_login {
  width: 400px;
  height: 200px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  .ablaze_login--box {
    border: 1px solid #ddd;
    width: 400px;
    .ablaze_login--form{
      padding: 30px 30px 10px;
    }
    .ablaze_login--action{
      padding: 20px;
      padding-bottom: 0;
      background-color: #f7f7f7;
    }
  }
  .ablaze_login--owl {
    width: 211px;
    height: 108px;
    position: absolute;
    top: -100px;
    left: 50%;
    margin-left: -111px;
    .owl_hand {
      width: 34px;
      height: 34px;
      -webkit-border-radius: 40px;
      border-radius: 40px;
      background-color: #472d20;
      -webkit-transform: scaleY(0.6);
      -moz-transform: scaleY(0.6);
      -o-transform: scaleY(0.6);
      -ms-transform: scaleY(0.6);
      transform: scaleY(0.6);
      -webkit-transition: 0.3s ease-out;
      -moz-transition: 0.3s ease-out;
      -o-transition: 0.3s ease-out;
      -ms-transition: 0.3s ease-out;
      transition: 0.3s ease-out;
      position: absolute;
      left: 14px;
      bottom: -8px;
    }
    .owl_hand_r {
      left: 170px;
    }
    .claws {
      top: 58px;
      position: absolute;
      width: 100%;
      height: 41px;
      overflow: hidden;
    }
    .owl_claw {
      width: 40px;
      height: 65px;
      position: absolute;
      left: 20px;
      top: 40px;
      -webkit-transition: 0.3s ease-out;
      -moz-transition: 0.3s ease-out;
      -o-transition: 0.3s ease-out;
      -ms-transition: 0.3s ease-out;
      transition: 0.3s ease-out;
      -webkit-transform: rotate(-20deg);
      -moz-transform: rotate(-20deg);
      -o-transform: rotate(-20deg);
      -ms-transform: rotate(-20deg);
      z-index: 100;
      transform: rotate(-20deg);
    }
    .owl_claw_r {
      transform: rotate(20deg) scaleX(-1);
      left: 158px;
    }
  }
  .owlActive {
    .owl_hand {
      transform: translateX(42px) translateY(-15px) scale(0.6);
    }
    .owl_hand_r {
      transform: translateX(-42px) translateY(-15px) scale(0.6);
    }
    .owl_claw {
      transform: translateX(40px) translateY(-40px);
    }
    .owl_claw_r {
      transform: translateX(-40px) translateY(-40px) scaleX(-1);
    }
  }
}
</style>
